<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script src="bootstrap/bootstrap-3.3.7-dist/js/jquery-3.5.1.min的副本 (1).js"></script>
    <style>
        .layui-table-cell {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">批量删除</button>
</div>
<table class="layui-hide" id="dept" lay-filter="dept" style="margin: 0px" style="table-layout:fixed">

</table>
<button type="button" data-type="add" class="layui-btn layui-btn-warm" style="height: 43px" id="add"><li class="layui-icon layui-icon-add-1">新增部门</li></button>
<div id="openProductBox" style="display: none; padding: 10px;">
    <table id="deptDetail" lay-filter="deptDetail"></table>
</div>
<div id="deptChange" style="display: none;margin-left: 40px">
    <form class="layui-form layui-form-pane" action="" >
        <input id="did" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <input type="text"  name="dname" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="state">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="state" value="true" checked="" title="正常" >
                <input type="radio" name="state" value="false" title="解散">
            </div>
        </div>
    </form>
</div>
<script src="layui/layui.all.js"></script>
</body>
<script>
    layui.use(['table','form'],function () {
        var table = layui.table;
        table.render({
            elem: "#dept",
            url: "/home/dept/findAll",
            method: "post",
            id: "deptTable",
            contentType: "application/json",
            parseData: function (res) {
                res.code = 0
                return {
                    "code": res.code,
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.result//解析数据列表
                };
            },
            cols: [[
                {type:'checkbox', fixed: 'left'}
            ,{field:'did', width:300, title: '部门ID'}
            ,{field:'dname', width:400, title: '部门名称',sort: true}
            ,{field:'state', width:500, title: '状态',sort: true,
                templet:function (dept) {
                    return dept.state==1?"正常":"解散";
                }},
            {fixed: 'right', Width:200, align:'center', toolbar: '#barDemo'}
        ]]
        });
        var $ = layui.$, active = {
            reload:function(){
                table.reload('deptTable',{

                })
            },
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('deptTable')
                    ,data = checkStatus.data;
                deptDetail(data);
                var list = [];
                layui.$.each(data,function (i,dept) {
                    list.push(dept.did);
                })
                layer.open({
                    type: 1,                     //类型
                    skin: "layui-layer-rim",
                    area: ["630px", "600px"],    //范围大小
                    title: "确认删除?", //定义标题
                    content:$('#openProductBox'),
                    btn:["确认删除","取消"],
                    btn1:function (index,layero) {
                        layer.close(index);
                    },
                    yes:function () {
                        layui.$.ajax({
                            url:"/home/dept/delMany",
                            type:"post",
                            dataType: "json",
                            data:JSON.stringify(list),
                            contentType:"application/json",
                            success:function (data) {
                                if (data.code==0){
                                    layer.closeAll();
                                    active['reload'].call(this);
                                }
                            }
                        })
                    }

                });
            },
            add:function () {
                layer.open({
                    type:1,
                    skin: "layer-layer-rim",
                    title: "新增部门", //定义标题
                    content:$("#deptChange"),
                    area: ["400px", "250px"],
                    btn:['提交','取消'],
                    btn2:function () {
                        layer.closeAll();
                    },
                    yes:function () {
                        var dept = {};
                        dept.dname = layui.$("[name='dname']").val();
                        dept.state = layui.$("input[name='state']:checked").val();
                        layui.$.ajax({
                            url:"/home/dept/addDept",
                            data:JSON.stringify(dept),
                            contentType: "application/json",
                            type:"post",
                            success:function (data) {
                                if (data.code==0){
                                    layer.closeAll();
                                    active['reload'].call(this);
                                }else {
                                    layer.alert(data.msg);
                                }
                            }
                        })
                    }
                })
            }
        };


        table.on('tool(dept)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                var list = [data];
                deptDetail(list);
                layer.open({
                    type:1,
                    skin: "layui-layer-rim",
                    area: ["625px", "400px"],    //范围大小
                    title: "部门详细信息", //定义标题
                    content:$("#openProductBox"),
                    btn:['关闭'],
                    btn2:function () {
                        layer.closeAll();
                    }
                })
            } else if(obj.event === 'del'){
                layer.confirm('真的删除么?', function(index){
                    obj.del();
                    layer.close(index);
                    layui.$.ajax({
                        url:"/home/dept/delByDid?did="+data.did,
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            if (data.code==0){
                                //调用注册的reload方法
                                active['reload'].call(this);
                            }
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                layui.$("[name='dname']").val(data.dname);
                layui.$("#did").val(data.did);
                layer.open({
                    type:1,
                    skin: "layer-layer-rim",
                    title: "修改信息", //定义标题
                    content:$("#deptChange"),
                    area: ["400px", "350px"],
                    btn:['提交','取消'],
                    btn2:function () {
                        layer.closeAll();
                    },
                    yes:function () {
                        var dept = {};
                        dept.did = layui.$("#did").val();
                        dept.dname = layui.$("[name='dname']").val();
                        dept.state = layui.$("input[name='state']:checked").val();
                        layui.$.ajax({
                            url:"/home/dept/updateDept",
                            data:JSON.stringify(dept),
                            contentType: "application/json",
                            type:"post",
                            success:function (data) {
                                if (data.code==0){
                                    layer.closeAll();
                                    active['reload'].call(this);
                                }
                            }
                        })
                    }
                })
            }
        });
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function deptDetail(data) {
            table.render({
                elem: "#deptDetail",
                data:data,
                cols:[[
                    {field:'did', width:100, title: '部门ID'}
                    ,{field:'dname', width:200, title: '部门名称',sort: true}
                    ,{field:'state', width:300, title: '状态',sort: true,
                        templet:function (dept) {
                            return dept.state==1?"正常":"解散";
                        }}
                ]]
            })
        }

    })
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger" lay-event="del">删除</a>
</script>
</html>